<template>
  <view class="list" :class="listClass" :style="listStyle">
    <!-- 列表头部 -->
    <view v-if="showHeader" class="list__header">
      <slot name="header">
        <text v-if="header" class="header-text">{{ header }}</text>
      </slot>
    </view>

    <!-- 列表内容 -->
    <view class="list__content">
      <!-- 列表项 -->
      <template v-for="(item, index) in items" :key="getItemKey(item, index)">
        <!-- 分割线 -->
        <view
          v-if="showDivider && index > 0"
          class="list__divider"
          :style="dividerStyle"
        ></view>

        <!-- 列表项 -->
        <view
          class="list__item"
          :class="getItemClass(item, index)"
          :style="getItemStyle(item, index)"
          @click="handleItemClick(item, index)"
        >
          <!-- 前置图标/头像 -->
          <view v-if="item.avatar || item.icon || $slots.prefix" class="list__prefix">
            <slot name="prefix" :item="item" :index="index">
              <!-- 头像 -->
              <image
                v-if="item.avatar"
                class="item-avatar"
                :src="item.avatar"
                :mode="avatarMode"
              />
              <!-- 图标 -->
              <text v-else-if="item.icon" class="item-icon">{{ item.icon }}</text>
            </slot>
          </view>

          <!-- 主要内容 -->
          <view class="list__content">
            <!-- 标题 -->
            <view v-if="item.title || $slots.title" class="item-title">
              <slot name="title" :item="item" :index="index">
                <text class="title-text">{{ item.title }}</text>
                <text v-if="item.required" class="required-mark">*</text>
              </slot>
            </view>

            <!-- 描述 -->
            <view v-if="item.description || $slots.description" class="item-description">
              <slot name="description" :item="item" :index="index">
                <text class="description-text">{{ item.description }}</text>
              </slot>
            </view>

            <!-- 额外信息 -->
            <view v-if="item.extra || $slots.extra" class="item-extra">
              <slot name="extra" :item="item" :index="index">
                <text class="extra-text">{{ item.extra }}</text>
              </slot>
            </view>
          </view>

          <!-- 后置内容 -->
          <view class="list__suffix">
            <!-- 右侧箭头 -->
            <view v-if="showArrow && item.arrow !== false" class="item-arrow">
              <text class="arrow-icon">›</text>
            </view>

            <!-- 徽章 -->
            <!-- <Badge
              v-if="item.badge"
              :text="item.badge.text"
              :type="item.badge.type"
              :custom-class="item.badge.customClass"
            /> -->

            <!-- 开关 -->
            <switch
              v-if="item.switch !== undefined"
              :checked="item.switch"
              :disabled="item.disabled"
              @change="handleSwitchChange($event, item, index)"
              @click.stop
            />

            <!-- 自定义后置内容 -->
            <slot name="suffix" :item="item" :index="index"></slot>
          </view>

          <!-- 加载状态 -->
          <view v-if="item.loading" class="item-loading">
            <view class="loading-spinner"></view>
          </view>
        </view>
      </template>

      <!-- 空状态 -->
      <view v-if="items.length === 0 && !loading" class="list__empty">
        <slot name="empty">
          <view class="empty-content">
            <text class="empty-icon">{{ emptyIcon }}</text>
            <text class="empty-text">{{ emptyText }}</text>
            <text v-if="emptyDescription" class="empty-description">{{ emptyDescription }}</text>
          </view>
        </slot>
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="list__loading">
        <slot name="loading">
          <view class="loading-content">
            <view class="loading-spinner"></view>
            <text class="loading-text">{{ loadingText }}</text>
          </view>
        </slot>
      </view>

      <!-- 加载更多 -->
      <view v-if="loadMore && !loading && items.length > 0" class="list__loadmore">
        <slot name="loadMore">
          <view class="loadmore-content" @click="handleLoadMore">
            <text class="loadmore-text">{{ loadMoreText }}</text>
          </view>
        </slot>
      </view>
    </view>

    <!-- 列表底部 -->
    <view v-if="showFooter" class="list__footer">
      <slot name="footer">
        <text v-if="footer" class="footer-text">{{ footer }}</text>
      </slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
// import Badge from './Badge.vue'  // Commented out to avoid compilation issues

// 列表项接口
interface ListItem {
  title?: string
  description?: string
  extra?: string
  avatar?: string
  icon?: string
  badge?: {
    text?: string
    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
    customClass?: string
  }
  switch?: boolean
  disabled?: boolean
  loading?: boolean
  clickable?: boolean
  arrow?: boolean
  required?: boolean
  [key: string]: any
}

// Props
interface Props {
  items?: ListItem[]
  header?: string
  footer?: string
  showHeader?: boolean
  showFooter?: boolean
  showDivider?: boolean
  showArrow?: boolean
  loading?: boolean
  loadingText?: string
  loadMore?: boolean
  loadMoreText?: string
  emptyIcon?: string
  emptyText?: string
  emptyDescription?: string
  avatarMode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix'
  itemHeight?: string
  padding?: string
  margin?: string
  backgroundColor?: string
  dividerColor?: string
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  items: () => [],
  showHeader: false,
  showFooter: false,
  showDivider: true,
  showArrow: false,
  loading: false,
  loadingText: '加载中...',
  loadMore: false,
  loadMoreText: '加载更多',
  emptyIcon: '📋',
  emptyText: '暂无数据',
  avatarMode: 'aspectFill',
  padding: '0',
  margin: '0',
  backgroundColor: '#ffffff',
  dividerColor: '#f0f0f0',
  customClass: ''
})

// Emits
const emit = defineEmits<{
  itemClick: [item: ListItem, index: number]
  switchChange: [event: any, item: ListItem, index: number]
  loadMore: []
}>()

// 计算属性
const listClass = computed(() => {
  return [
    {
      'list--loading': props.loading
    },
    props.customClass
  ]
})

const listStyle = computed(() => {
  return {
    margin: props.margin,
    backgroundColor: props.backgroundColor
  }
})

const dividerStyle = computed(() => {
  return {
    backgroundColor: props.dividerColor
  }
})

// 方法
/**
 * 获取列表项唯一键
 */
const getItemKey = (item: ListItem, index: number) => {
  return item.id || item.key || index
}

/**
 * 获取列表项样式类
 */
const getItemClass = (item: ListItem, index: number) => {
  return [
    {
      'list__item--clickable': item.clickable !== false,
      'list__item--disabled': item.disabled,
      'list__item--loading': item.loading
    },
    item.customClass
  ]
}

/**
 * 获取列表项样式
 */
const getItemStyle = (item: ListItem, index: number) => {
  const style: any = {
    padding: props.padding
  }

  if (props.itemHeight) {
    style.minHeight = props.itemHeight
  }

  if (item.backgroundColor) {
    style.backgroundColor = item.backgroundColor
  }

  return style
}

/**
 * 处理列表项点击
 */
const handleItemClick = (item: ListItem, index: number) => {
  if (item.disabled || item.loading) return
  emit('itemClick', item, index)
}

/**
 * 处理开关变化
 */
const handleSwitchChange = (event: any, item: ListItem, index: number) => {
  emit('switchChange', event, item, index)
}

/**
 * 处理加载更多
 */
const handleLoadMore = () => {
  emit('loadMore')
}
</script>

<style lang="scss" scoped>
.list {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;

  &__header,
  &__footer {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;

    .header-text,
    .footer-text {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }

  &__footer {
    border-bottom: none;
    border-top: 1px solid #f0f0f0;
  }

  &__content {
    position: relative;
  }

  &__divider {
    height: 1px;
    background: #f0f0f0;
    margin: 0 16px;
  }

  &__item {
    display: flex;
    align-items: center;
    padding: 16px;
    transition: background-color 0.3s ease;
    position: relative;
    min-height: 48px;

    &:active {
      background: #f8f9fa;
    }

    &--clickable {
      cursor: pointer;
    }

    &--disabled {
      opacity: 0.6;
      pointer-events: none;
    }

    &--loading {
      pointer-events: none;
    }
  }

  &__prefix {
    display: flex;
    align-items: center;
    margin-right: 12px;

    .item-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #f0f0f0;
    }

    .item-icon {
      font-size: 20px;
      color: #666;
    }
  }

  &__content {
    flex: 1;
    min-width: 0;

    .item-title {
      display: flex;
      align-items: center;
      margin-bottom: 4px;

      .title-text {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        line-height: 1.4;
      }

      .required-mark {
        color: #ff4757;
        margin-left: 4px;
        font-size: 14px;
      }
    }

    .item-description {
      .description-text {
        font-size: 14px;
        color: #999;
        line-height: 1.4;
      }
    }

    .item-extra {
      margin-top: 4px;

      .extra-text {
        font-size: 13px;
        color: #666;
        line-height: 1.3;
      }
    }
  }

  &__suffix {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;

    .item-arrow {
      .arrow-icon {
        font-size: 16px;
        color: #ccc;
      }
    }
  }

  &__empty {
    padding: 40px 20px;
    text-align: center;

    .empty-content {
      .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
      }

      .empty-text {
        display: block;
        font-size: 14px;
        color: #999;
        margin-bottom: 8px;
      }

      .empty-description {
        display: block;
        font-size: 12px;
        color: #ccc;
        line-height: 1.5;
      }
    }
  }

  &__loading {
    padding: 40px 20px;
    text-align: center;

    .loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;

      .loading-spinner {
        width: 24px;
        height: 24px;
        border: 2px solid #f3f3f3;
        border-top: 2px solid #1890ff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      .loading-text {
        font-size: 14px;
        color: #999;
      }
    }
  }

  &__loadmore {
    padding: 16px;
    text-align: center;
    border-top: 1px solid #f0f0f0;

    .loadmore-content {
      cursor: pointer;

      &:active {
        opacity: 0.7;
      }

      .loadmore-text {
        font-size: 14px;
        color: #1890ff;
      }
    }
  }

  // 状态样式
  &--loading {
    pointer-events: none;
  }
}

.item-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;

  .loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #1890ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 480px) {
  .list {
    &__header,
    &__footer {
      padding: 12px;
    }

    &__item {
      padding: 12px;
    }

    &__prefix {
      margin-right: 10px;

      .item-avatar {
        width: 36px;
        height: 36px;
      }

      .item-icon {
        font-size: 18px;
      }
    }

    &__content {
      .item-title {
        .title-text {
          font-size: 15px;
        }
      }

      .item-description {
        .description-text {
          font-size: 13px;
        }
      }
    }
  }
}
</style>